<script setup>
import { onMounted, ref } from 'vue'
import { cancelCollection, getCollectionList } from '@/api/me'

const collectionList = ref([])
const listTotal = ref(0)
const pageNo = ref(1)

async function onGetCollectionList() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { result: { records, total } } = await getCollectionList({ pageNo: pageNo.value, pageSize: 10 })
    uni.hideLoading()
    collectionList.value = records
    listTotal.value = total
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: '获取收藏列表失败' })
  }
}

function onPageNumChange(e) {
  pageNo.value = e.current
}

function goDetail(item) {
  const map = {
    'jingdian': '/pages/play/view/scenic-spot-detail',
    'merchant': '/pages/shop/view/shop-detail',
    'food': '/pages/shop/view/food-detail',
    'strategy': '/pages/play/view/play-strategy-detail',
    'community-food': '/pages/index/view/food-detail',
  }

  if (!map[item.target])
    return

  uni.navigateTo({ url: `${map[item.target]}?id=${item.dataid}` })
}

const confirmVisible = ref(false)
const currentDeleteId = ref(null)
function onDelete(id) {
  currentDeleteId.value = id
  confirmVisible.value = true
}
async function onConfirm() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { success, message } = await cancelCollection(currentDeleteId.value)
    uni.hideLoading()

    if (!success)
      throw new Error(message)

    await uni.showToast({ icon: 'success', title: '删除成功' })
    await onGetCollectionList()
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: e.message, duration: 2000 })
  }
}

onMounted(() => {
  onGetCollectionList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="我的收藏" custom-color="#000" left-show placeholder fixed />
    <main class="mt-1.5 bg-white">
      <nut-empty v-if="collectionList.length === 0" description="暂无收藏">
        <template #image>
          <view class="center h-full">
            <image class="block !h-230 !w-180" src="../../../static/image/me/empty.jpg" />
          </view>
        </template>
      </nut-empty>
      <view v-else>
        <uni-table stripe border class="w-full">
          <uni-tr>
            <uni-th width="120" align="center">
              <view class="text-black">
                名称
              </view>
            </uni-th>
            <uni-th width="90" align="center">
              <view class="text-black">
                类型
              </view>
            </uni-th>
            <uni-th width="120" align="center">
              <view class="text-black">
                收藏时间
              </view>
            </uni-th>
            <uni-th width="60" align="center">
              <view class="text-black">
                操作
              </view>
            </uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="item in collectionList" :key="item.id">
            <uni-td align="center" class="truncate max-w-[120px]">
              <view class="text-[#3E7CDE] truncate underline underline-offset-4 max-w-[120px]" @click="goDetail(item)">
                {{ item.title }}
              </view>
            </uni-td>
            <uni-td align="center">
              {{ item.target_dictText }}
            </uni-td>
            <uni-td align="center">
              {{ item.createTime.split(' ')[0] }}
            </uni-td>
            <uni-td align="center">
              <view class="flex justify-center items-center">
                <view class="i-uiw:delete text-[#D81E06]" @click="onDelete(item.id)" />
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="px-2 py-1">
          <uni-pagination :total="total" :current="pageNum" :page-size="10" @change="onPageNumChange" />
        </view>
      </view>
    </main>
    <nut-dialog v-model:visible="confirmVisible" content="确认取消收藏吗?" @ok="onConfirm" />
  </view>
</template>
